<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
  out.clear();
  String tblWidth="950px";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>	
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>产品类目管理</title>
<link href="/_resources/css/default/style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/_resources/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/_resources/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/_resources/easyui/themes/extIcon.css">
	<link rel="stylesheet" type="text/css" href="/_resources/easyui/demo/demo.css">
	<script type="text/javascript" src="/_resources/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/_resources/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/_resources/js/jqueryUtils.js"></script>
	<script type="text/javascript" src="/_resources/js/date.js"></script>
	<script type="text/javascript" src="/_resources/My97DatePicker/WdatePicker.js"></script>
	<script language='javascript'>
	var grid;
	
	$(function() {
		
	  grid = $('#grid').datagrid({
				title : '',
				url : 'listData.do',
				striped:true,
				rownumbers : true,
				pagination : true,
				pageSize : 15,
				pageList: [15,30,50,100,200],
				rowStyler:function(){
				  return 'height:150px';
				},
				idField : 'id',
				columns : [ [ 
				{
					field : 'id',
					checkbox: true
				},{
					width : 100,
					title : 'code',
					align:'center',
					field : 'code',
					sortable: true,
					formatter: function(value,row,index){
						return "<a href='javascript:void(0)' onclick='editCategory(" + row.id + ")'>" + row.code + "</a>";
					} 
				},{
					width : 120,
					title : 'name',
					align:'center',
					field : 'name',
				},{
					width : 200,
					title : '产品线',
					align:'center',
					field : 'prod_line',
					sortable: true,
					formatter: function(value,row,index){
						return row.prodLine;
					} 
				},{
					width : 200,
					title : '产品类',
					align : 'center',
					field : 'prod_class',
					sortable: true,
					formatter: function(value,row,index){
						return row.prodClass;
					} 
				},{
					width : 120,
					title : '备注',
					align:'center',
					field : 'memo',
					formatter: function(value,row,index){
						return row.memo;
					} 
				}
				] ],
				toolbar : '#toolbar'
			});
	  });
	  
	function jsQuery() {
		grid.datagrid('clearSelections');
	/*
		$(':text').each(function(){
			$(this).val($.trim($(this).val()));
		}); */
		var params =  $.serializeObject($('#searchForm'));
		//params.[[${_csrf.parameterName}]] = '[[${_csrf.token}]]';
		grid.datagrid('load', params); 
	};	
	
	function jsDelete(){
		var selRow = $('#grid').datagrid("getSelected");
		if( null == selRow ){
			alert('请选择要操作的行');
			return;
		}
		
		$.messager.confirm('Confirm','确定删除?',function(r){
			if (!r)
				return;
				
			var szUrl = "delete.do";
			$.ajax({
				type: 'POST',
				url: szUrl ,
				data: {id:selRow.id},
				dataType: "json",
				error:function(){ alert('系统异常'); },
				success: function(json){
					if(json.errorCode == 200){
						$.messager.show( {title: '提示信息',msg:'删除成功'} ); 
						jsQuery();
					}else{
						$.messager.alert('错误提醒','删除失败-' + json.error);
					}
				}
			});	
		}); 
	}
	
	function editCategory(id){
		$('#categoryEditForm').form('clear');
		if(id){
			$.ajax({
				type:'post',
				url:'info.do',
				data:{id:id},
				error:function(){
        			$.messager.show( {title: 'Error',msg:'系统异常'} ); 
            	},
            	success: function(result){
            		$('#categoryEditForm').form('load', result.data);
                }
			});
            $('#categoryDlg').dialog('open').dialog('center').dialog('setTitle','修改类目信息');
        }else{
    	    $('#categoryDlg').dialog('open').dialog('center').dialog('setTitle','增加产品类目');
    	}
    }
    
    function saveCategory(){
    	if( !$('#categoryEditForm').form('validate') )
        	return;        		
        var params =  $.serializeObject($('#categoryEditForm'));
        
        if(params.code == ''){
        	$.messager.alert('Warning','类目code不能为空');
        }
        if(params.name == ''){
        	$.messager.alert('Warning','类目名称');
        }
        if(params.prodLine == '' || params.prodClass == ''){
        	$.messager.alert('Warning','产品线和产品类不能为空');
        }
        
        $.ajax({
        	type:'post',
        	url:'save.do',
        	data:params,
        	error:function(){
        		$.messager.show( {title: 'Error',msg:'系统异常'} ); 
			},
			success: function(result){
				if (result.errorCode != 200){
					$.messager.show({title: 'Error', msg: result.error});
                } else {
                	$.messager.show({title: '消息', msg: '保存成功'});
                }
            }
		});
    }
</script>
<style>

</style>
</head>
<body class="easyui-layout" data-options="fit:true,border:false">
<div id="toolbar" style="display: none">
<c:if test="${singlePage}">
<table width=800px>
  <tr><td height=10></td></tr>
  <tr><td width=100% align='center' height=30 class='title'>类目管理</td></tr>
</table>
</c:if>
	<form name="searchForm" id="searchForm" method="post" action="export.do">
	<table width="100%" border="0">
		<tr> 
			<td style="width: 80px;text-align:right">产品线</td>
			<td style="width: 150px">
				<input name="desc_cn" id="desc_cn" type="text" style="width:140px;" />
			</td>
			<td style="width: 80px;text-align:right">产品类</td>
			<td style="width: 150px">
				<input name="desc_en" id="desc_en" type="text"  style="width:140px;" />
			</td>
			<td style="width: 80px;text-align:right">类目Code</td>
			<td style="width: 150px">
				<input name="features" id="features" type="text" style="width:140px;" />
			</td>
			<td >
				<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" 
				onclick="jsQuery()" style="margin-left: 20px;" >查询</a> 
				
				<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add'" 
				onclick="editCategory()" style="margin-left: 0px;" >新增</a> 
				
				<a href='javascript:;' onclick='jsDelete()'>删除</a>
			</td>
		</tr>
	</table>
	</form>
	</div>
	
	<table id="grid" class="easyui-datagrid" data-options="fit:true,border:false">
	</table>
	
	
	<div id="categoryDlg" class="easyui-dialog" style="width:500px;height:320px;padding:5px 5px"
            closed="true" buttons="#categoryDlg-buttons">        
        <form id="categoryEditForm" method="post">
                <input type='hidden' name="id" />
        <table>
            <tr>
              <td style='width:70px;text-align:right'>类目code</td>
              <td style='width:280px'>
              	<input type='text' name='code' style='width:200px' />
              </td>
            </tr>
            <tr>
              <td style='text-align:right'>类目名称</td>
              <td >
              	<input type='text' name='name' style='width:200px' />
              </td>
            </tr>
            <tr>  
              <td style='text-align:right'>产品线</td>
              <td >
              	<input type='text' name='prodLine' style='width:200px' />
              </td>
            </tr>
            <tr>  
              <td style='text-align:right'>产品类</td>
              <td >
              	<input type='text' name='prodClass' style='width:200px' />
              </td>
            </tr>
            <tr>
              <td style='text-align:right'>备注</td>
              <td colspan='3'>
              	<input type='text' name='memo' style='width:300px'  />
              </td>
            </tr>
        </table>    
        </form>
    </div>
    <div id="categoryDlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveCategory()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#categoryDlg').dialog('close')" style="width:90px">关闭</a>
    </div>
</body>
</html>